<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-button type="primary" @click="handleForm(false, {})" v-auth="'sys:area:save'">
          <Icon icon="i-ant-design:plus-outlined" /> {{ t("新增") }}
        </a-button>
      </template>

      <template #toolbar>
        <a-button @click="expandAll" :title="t('展开一级')"> <Icon icon="i-bi:chevron-double-down" /> {{ t("展开") }} </a-button>
        <a-button @click="collapseAll" :title="t('折叠全部')"> <Icon icon="i-bi:chevron-double-up" /> {{ t("折叠") }} </a-button>
      </template>

      <template #firstColumn="{ record }">
        <span class="cursor-pointer" @click="expandCollapse(record)">
          {{ record.areaName }}
        </span>
      </template>
    </BasicTable>
    <InputForm @register="registerInputFormDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" name="system-area" setup>
  import { ref } from "vue"
  import { BasicTable, BasicColumn, useTable } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useGlobSetting } from "/@/hooks/setting"
  import { columns, searchFormSchema } from "./data"
  import { pageArea, deleteArea, updateAreaStatus } from "/@/api/infra/area"
  import { useMessage } from "/@/hooks/web/useMessage"
  import InputForm from "./form.vue"
  import { Icon } from "/@/components/Icon"

  const { t } = useI18n("")
  const { createMessage } = useMessage()
  const glob = useGlobSetting()
  const [registerInputFormDrawer, { openDrawer: openInputFormDrawer }] = useDrawer()

  const actionColumn: BasicColumn = {
    width: 160,
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "删除",
        color: "error",
        ifShow: record.sendStatus != 1,
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
      {
        label: "禁用",
        ifShow: record.status === "1",
        color: "error",
        popConfirm: {
          title: "确定禁用吗?",
          confirm: handleUpdateStatus.bind(null, record.id, "0"),
        },
      },
      {
        label: "启用",
        ifShow: record.status === "0",
        popConfirm: {
          title: "确定启用吗?",
          confirm: handleUpdateStatus.bind(null, record.id, "1"),
        },
      },
    ],
    dropDownActions: (record: Recordable) => [
      {
        label: "添加下级",
        onClick: handleForm.bind(null, false, {
          parentId: record.id,
          sortNo: record.sortNo,
        }),
      },
      {
        label: "编辑",
        onClick: handleForm.bind(null, true, record),
      },
    ],
  }

  const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
    title: "区域",
    api: pageArea,
    columns: columns,
    bordered: false,
    beforeFetch: (params) => {
      params.parentId = !params.areaId && !params.parentId ? 0 : params.parentId
      return params
    },
    formConfig: {
      baseColProps: { lg: 6, md: 12 },
      labelWidth: 90,
      schemas: searchFormSchema,
      showResetButton: false,
    },
    showTableSetting: true,
    useSearchForm: true,
    isTreeTable: true,
    pagination: true,
    canResize: true,
    rowKey: "id",
    actionColumn,
  })

  async function handleDelete(record) {
    await deleteArea({ areaId: record.id }, reload)
  }

  const handleForm = (isUpdate, record) => {
    openInputFormDrawer(true, { record, isUpdate })
  }

  const handleUpdateStatus = async (areaId, status) => {
    await updateAreaStatus({ areaId, status })
    handleSuccess()
  }

  const handleSuccess = () => {
    reload()
  }
</script>
